<template>
  <li 
    :class="[
      'bx-menu-item',
      {
        'bx-menu-item--selected': isSelected,
        'bx-menu-item--disabled': disabled
      }
    ]"
    @click="handleClick"
  >
    <div class="bx-menu-item__content">
      <BxIcon v-if="icon" :name="icon" class="bx-menu-item__icon" />
      <span class="bx-menu-item__title">
        <slot>{{ title }}</slot>
      </span>
    </div>
  </li>
</template>

<script>
import { computed, inject } from 'vue'
import BxIcon from '../basic/BxIcon.vue'

export default {
  name: 'BxMenuItem',
  components: {
    BxIcon
  },
  props: {
    key: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const menu = inject('bx-menu', {})

    const isSelected = computed(() => {
      return menu.selectedKeys?.includes(props.key)
    })

    const handleClick = () => {
      if (props.disabled) return
      menu.handleSelect?.(props.key, [props.key])
    }

    return {
      isSelected,
      handleClick
    }
  }
}
</script>

<style scoped>
.bx-menu-item {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: all var(--bx-transition-medium);
  border-radius: var(--bx-radius-small);
  margin: 2px;
}

.bx-menu-item:hover {
  background: var(--bx-glass-bg-hover);
}

.bx-menu-item--selected {
  background: rgba(0, 122, 255, 0.15);
  color: var(--bx-text-primary);
}

.bx-menu-item--selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(0, 122, 255, 0.8);
  border-radius: 0 2px 2px 0;
}

.bx-menu-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bx-menu-item__content {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: var(--bx-spacing-sm);
  position: relative;
  z-index: 1;
}

.bx-menu-item__icon {
  font-size: 16px;
  color: var(--bx-text-secondary);
  flex-shrink: 0;
}

.bx-menu-item--selected .bx-menu-item__icon {
  color: rgba(0, 122, 255, 0.8);
}

.bx-menu-item__title {
  color: var(--bx-text-primary);
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 水平模式 */
.bx-menu--horizontal .bx-menu-item {
  display: inline-block;
  margin: 0;
  border-radius: 0;
}

.bx-menu--horizontal .bx-menu-item--selected::before {
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: auto;
  height: 3px;
  border-radius: 2px 2px 0 0;
}

/* 折叠模式 */
.bx-menu--collapsed .bx-menu-item__title {
  display: none;
}

.bx-menu--collapsed .bx-menu-item__content {
  justify-content: center;
  padding: 12px 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bx-menu-item__content {
    padding: 10px 12px;
  }
  
  .bx-menu-item__title {
    font-size: 13px;
  }
  
  .bx-menu-item__icon {
    font-size: 14px;
  }
}
</style>

